<!--
 * @Author: your name
 * @Date: 2022-03-02 13:34:55
 * @LastEditTime: 2022-03-15 13:15:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-data.vue
-->
<template>
  <el-card id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>产品信息 PRODUCT INFORMATION</span>
      <div style="float: right; padding: 3px 0" type="text"><slot name="close"></slot></div>
    </div>
    <!-- <div class="box"> -->
    <el-row>
      <el-col :span="4">
        <div class="zh-img-sty">
          <img
            class="zzimg"
            :src="
              topimgurl
                ? topimgurl
                : 'data:image/png;base64,' + imgurls
            "
            alt=""
          />
        </div>
      </el-col>
      <el-col :span="20">
        <p class="batch-title">{{ batchBaseMessageList.batchName }}</p>
        <ul>
          <!-- <li>
            <span class="zh-lable">| 品牌名:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.brand"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品编号:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.productNumber"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品等级:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.productGrade"
            />
          </li> -->
          <li>
            <span class="zh-lable">| 种养种类:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.plantingTypeName"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品品种:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.varietyName"
            />
          </li>
          <li>
            <span class="zh-lable">| 批次名称:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.batchName"
            />
          </li>
          <li>
            <span class="zh-lable">| 批次号:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.batchNo"
            />
          </li>
          <!-- <li>
            <span class="zh-lable">| 产地:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.originPlace"
            />
          </li> -->
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <slot name="open"></slot>
    </el-row>
  </el-card>
</template>

<script>
// import axios from "axios";
// import zhecharts from "@/components/Echarts/components/linechart/chart.vue";
// import zhrowblank from "@/components/zh-row-blank/zh-row-blank.vue";
export default {
  props: {
    batchNo: {
      type: Number,
      default: 0
    },
    growthdatalist: {
      type: Array,
      default: () => []
    }
  },
  // components: { zhecharts, zhrowblank },
  data() {
    return {
      loading: false,
      rowblankList: [
        {
          name: "稻飞虱",
          value: 2, // 必须为数字
          unit: "次",
          allnum: 5, // 总数
          prence: "110",
          color: ""
        },
        {
          name: "三化螟",
          value: 1, // 必须为数字
          unit: "次",
          allnum: 3, // 总数
          prence: "110",
          color: ""
        }
      ],
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      topimgurl:
        "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      imgurls: "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      batchBaseMessageList: {
        batchName: "003佐根荣中区三号田水稻（南粳46）", // 批次名称
        plantingTypeName: "水稻", // 种养种类
        mode: "", //
        varietyName: "南粳46", // 产品品种
        batchNo: "G202106159", // 批次号
        contact: "", // 负责人
        organizationName: "", // 主体名称.
        address: "", // 主体地址
        trace: {
          brand: "", // 品牌名
          productNumber: "", // 产品编号
          productGrade: "", // 产品等级
          originPlace: "", // 产地
          plantPlace: "", // 种养地址
          tracePictureId: "" // 顶部图片id
        }
      }
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.batch-title {
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 24px;
  color: rgba(130, 229, 255, 1);
}
.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.openbtn {
  width: 100%;
}
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  // ::v-deep .el-carousel {
  //   padding: 10px;
  //   .el-carousel__container {
  //     // background-color: rgba(0,57,71,0.55);
  //     .el-carousel__item--card {
  //       width: 40% !important;
  //     }
  //   }
  // }
  ::v-deep .el-card__body {
    padding: 0;
    min-height: 200px;
  }
  .el-col {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    .zh-img-sty {
      width: 100%;
      height: 280px;
      // background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .zzimg {
        margin: 0 auto;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-sizing: content-box;
        border: 15px solid rgba($color: rgba(15, 70, 86, 1), $alpha: 1);
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      li {
        display: flex;
        list-style-type: none;
        margin: 0;
        width: 33% !important;
        line-height: 60px;
        .el-input {
          margin-left: 10px;
          width: 60%;
          ::v-deep .el-input__inner {
            border: 0;
            height: 25px;
            background-color: rgba($color: #0e4352, $alpha: 1);
            border-radius: 40px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
